<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>requestAnimationFrame</title>
    <style>
        .myDiv{
            background-color: pink;
        }
    </style>
</head>
<body>
<script>
    var body=document.getElementsByTagName('body')[0]
    function count(params) {
        //var label = document.createElement("div");  
        var done=1000;
        console.time('count')
        for (var index = 0; index <=done; index++) {
            // label.innerText = index;
            // body.appendChild(label);
            console.log(done)
            if(index===done){
                //console.log(done)
            }
        }
        console.timeEnd('count')
    }
    
    
</script>


    <div id="myDiv1" class="myDiv" style="width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn1">run setInterval</button>
<script>
var timer1;
var btn1 =document.getElementById('btn1');
var myDiv1 =document.getElementById('myDiv1');
btn1.onclick = function(){
    clearInterval(timer1);
    myDiv1.style.width = '0';
    console.time('timer1')
    timer1 = setInterval(function(){
        count();
        if(parseInt(myDiv1.style.width) < 500){
            myDiv1.style.width = parseInt(myDiv1.style.width) + 5 + 'px';
            myDiv1.innerHTML =     parseInt(myDiv1.style.width)/5 + '%';    
        }else{
            console.timeEnd('timer1')
            clearInterval(timer1);
        }        
        
    },16);
}
</script>


<div id="myDiv2" class="myDiv" style="width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn2">run setTimeout</button>
<script>
var timer2;
var btn2 =document.getElementById('btn2');
var myDiv2 =document.getElementById('myDiv2');
btn2.onclick = function(){
    clearTimeout(timer2);
    myDiv2.style.width = '0';
    console.time('timer2')
    timer2 = setTimeout(function fn(){
        
        count();
        if(parseInt(myDiv2.style.width) < 500){
            myDiv2.style.width = parseInt(myDiv2.style.width) + 5 + 'px';
            myDiv2.innerHTML =     parseInt(myDiv2.style.width)/5 + '%';
            timer2 = setTimeout(fn,16);
        }else{
            clearTimeout(timer2);
            console.timeEnd('timer2')
        }
        
    },16);
}
</script>



<div  id="myDiv3" class="myDiv" style="width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn3">run requestAnimationFrame</button>
<script>
var timer3;
var btn3 =document.getElementById('btn3');
var myDiv3 =document.getElementById('myDiv3');
btn3.onclick = function(){
    myDiv3.style.width = '0';
    cancelAnimationFrame(timer3);
    console.time('timer3')
    timer3 = requestAnimationFrame(function fn(){
        
        count();
        if(parseInt(myDiv3.style.width) < 500){
            myDiv3.style.width = parseInt(myDiv3.style.width) + 5 + 'px';
            myDiv3.innerHTML =     parseInt(myDiv3.style.width)/5 + '%';
            timer3 = requestAnimationFrame(fn);
        }else{
            console.timeEnd('timer3')
            cancelAnimationFrame(timer3);
        }    
        
    });
}
</script>
<p>
实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。
<br><br>
屏幕刷新频率：屏幕每秒出现图像的次数。普通笔记本为60Hz
<br><br>
动画原理：计算机每16.7ms刷新一次，由于人眼的视觉停留，所以看起来是流畅的移动。
<br><br>
setTimeout：通过设定间隔时间来不断改变图像位置，达到动画效果。但是容易出现卡顿、抖动的现象；原因是：1、settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；2、settimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧。
<br><br>
requestAnimationFrame：优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿
<br><br>
优势：
CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。


 
</p>


</body>
</html>